<!-- subpkg_consult/department/index.vue -->
<script lang="ts" setup>
  import { departmentListApi } from '@/apis/consult'
  import type { DepartData } from '@/types/consult'
import { objectToQueryParams } from '@/utils';
  import { computed, ref } from 'vue'

  const list = ref<DepartData[]>([])

  const getData = async () => {
    const res = await departmentListApi()
    list.value = res
  }

  const activeIndex = ref(0)

  getData()

  const childList = computed(() => {
    return list.value[activeIndex.value]?.child
  })

 const pageParams = defineProps<{ illnessType: string }>()
</script>

<template>
  <view class="department-page">
    <scroll-view scroll-y class="department-primary">
      <template v-for="(item, index) in list" :key="item.id">
        <view
          class="department-item"
          :class="{ active: activeIndex === index }"
          @click="activeIndex = index"
          v-if="item.child.length > 0"
        >
          {{ item.name }}
        </view>
      </template>
    </scroll-view>
    <scroll-view class="department-secondary">
      <navigator
        v-for="item in childList"
        :key="item.id"
        hover-class="none"
        :url="`/subpkg_consult/description/index?${objectToQueryParams({...pageParams,depId:item.id})}`"
        class="department-item"
      >
        {{ item.name }}
      </navigator>
    </scroll-view>
  </view>
</template>

<style lang="scss">
  @import './index.scss';
</style>
